<template>
  <div class="bookrack_page">
    <div class="top">
      <div class="left">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" />
        </van-dropdown-menu>
      </div>
      <div class="right">
        <span class="iconfont icon-sousuo" @click="inputFun"></span>
        <span class="iconfont icon-shizhong"></span>
        <span class="iconfont icon-santiaoxian"></span>
      </div>
    </div>

    <van-empty v-show="bookRackList.length==0" description="暂无书籍" />

    <div class="books">
      <div class="item" v-for="(item, index) in bookRackList" :key="index" @click="goDetailFun(item.id,item.title)">
        <div class="img"><img :src="item.cover" alt="" /></div>
        <div class="title">{{ item.title }}</div>
        <div class="noRead">{{ item.author }}</div>
      </div>
    </div>

    <!-- 底部导航 -->
    <footer-nav></footer-nav>
  </div>
</template>

<script>
import footerNav from "../components/base/footerNav.vue";

export default {
  data() {
    return {
      value1: 0,
      value2: "a",
      option1: [
        { text: "书架", value: 0 },
        { text: "本地书", value: 1 },
      ],
      bookRackList: [], //书架书籍
    };
  },
  methods: {
    inputFun() {
      this.$router.push("/search");
    },
    goDetailFun(id,title){
       // 调用vuex存储状态
      this.$store.commit("setBookInfo", { id, title });
      this.$router.push({name:"details"})
    }
  },
  components: {
    footerNav,
  },
  created() {
    // let detailsInfo = this.$store.state.bookInfo;
    this.bookRackList = this.$store.state.bookRack;
  },
};
</script>

<style lang="less">
.bookrack_page {
  padding: 0 20px;
  background-color: #f6f6f6;
  height: 100vh;
  .top {
    display: flex;
    justify-content: space-between;
    .left {
      width: 70px;
      .van-dropdown-menu__bar {
        box-shadow: none;
        background-color: #f6f6f6;

        .van-dropdown-menu__title {
          font-size: 18px;
        }
      }
    }
    .right {
      line-height: 50px;
      .iconfont {
        font-size: 19px;
      }
      .icon-sousuo {
        margin-right: 20px;
      }
      .icon-shizhong {
        margin-right: 20px;
      }
    }
  }
  .books {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 92px;
      margin-bottom: 12px;

      &:nth-child(3n-1) {
        margin: 0 calc((100% - (92px * 3)) / 2);
        //   background-color: red;
      }
      .img {
        margin-bottom: 8px;
        img {
          width: 92px;
          height: 128px;
        }
      }
      .title {
        // height: 30px;
        width: 92px;
        font-size: 14px;
        line-height: 14px;
        margin-bottom: 5px;

        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .noRead {
        width: 92px;
        font-size: 14px;
        line-height: 14px;
        color: #c9c9c9;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
</style>